<template>
  <div class="page page-child">
    <div class="page__bd">
      <div class="weui-tab">
        <div class="weui-tab__panel">
          <div class="weui-tab__panel_top">
            <i @click="goBack" class="el-icon-arrow-left return-back"></i>
            <div class="top_title"  >
              <p>便签</p>
            </div>
          </div>
          <div class="weui-tab__panel_bd">
            <van-tabs v-model="active" animated swipeable title-active-color="#62c9f8" color="#62c9f8" title-inactive-color="#333" line-width="5.5rem">
              <van-tab :title="item_title"  v-for="(item_title,title_index) in title" :key="title_index">
                <template v-if="active===0">
                  <div style="height:calc(100vh - 86px);overflow:scroll;background-color: #f6f6f6">
                    <!-- 随笔 -->
                    <template v-if="isNull">
                      <div class="empty">
                        <img src="../../../static/images/memo/empty.png"/>
                        <div>点击右下角按钮新建便签</div>
                      </div>
                    </template>
                    <template v-else>
                      <div class="memoWrapper">
                        <template v-for="(item,index) in recently.topData">
                          <div class="memoItem isTop" @click="toDisplay" :style="{backgroundColor:item.bgColor,width:memoWidth}">
                            <div class="itemLeft">
                              <div class="leftTop">{{item.content.text}}</div>
                              <div class="leftBottom">{{item.date}}</div>
                            </div>
                            <div class="itemRight">
                              <div class="icon iconfont icon-start1"></div>
                            </div>
                          </div>
                          <div class="selectIcon" v-if="isOperate"  @click="toDisplay" data-idx="index" data-type="isTop">
                            <div class="icon' iconfont" :class="item.isCheck?'icon-xuanzhong3':'icon-weixuanzhong'"></div>
                          </div>
                        </template>
                        <template v-for="(item,index) in recently.data">
                          <div class="memoItem" @click="toDisplay"  data-idx="index" data-type="normal" >
                            <div class="itemLeft">
                              <div class="leftTop">{{item.content.text}}</div>
                              <div class="leftBottom">{{item.date}}</div>
                            </div>
                            <div class="itemRight">
                              <div class="icon iconfont icon-wujiaoxingxingxing1"></div>
                            </div>
                          </div>
                          <div class="selectIcon" v-if="isOperate"  @click="toDisplay" data-idx="index" data-type="normal">
                            <div class="icon' iconfont" :class="item.isCheck?'icon-xuanzhong3':'icon-weixuanzhong'"></div>
                          </div>
                        </template>
                      </div>
                    </template>
                  </div>
                </template>
                <template v-if="active===1">
                  <div style="height:calc(100vh - 86px);overflow:scroll;background-color: #f6f6f6">
                    <div class="groupContent">
                      <div class="newGroup" @click="newGroup">
                        <div class="itemLeft">
                          <div class="icon iconfont icon-1"></div>
                        </div>
                        <div class="itemRight">
                          <div class="title">新建分组</div>
                        </div>
                      </div>
                      <template v-for="(item,index) in group.data">
                        <div class="groupWrapper" :data-idx="index" @click="toMemoItem" >
                          <div class="groupitem">
                            <div class="itemLeft">
                              <div class="icon iconfont icon-bianqian1" :style="{ color:item.bgColor }"></div>
                            </div>
                            <div class="itemRight">
                              <div class="title">{{item.title}}</div>
                              <div class="icon iconfont "></div>
                            </div>
                          </div>
                        </div>
                      </template>

                    </div>
                  </div>
                </template>
              </van-tab>
            </van-tabs>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "Index"
    ,data(){
      return{
        active:0
        ,title:[
          "随笔"
          ,"分组"
        ]
        ,recently:{  //最近
          topData:[
            {
              content: {
                delta: {
                  ops: [
                    { insert: "测试\r一下\r" }
                  ]
                },
                html: ' < p wx: nodeid = "58" > 测试</p > <p wx: nodeid="94">一下</p>',
                text: "测试一下"
              },
              date: '10/26',
              bgColor: '#fff',
              isCheck:false
            },
          ],
          data:[
            {
              content:{
                delta:{
                  ops:[
                    { insert: "测试\r一下\r"}
                  ]
                },
                html:' < p wx: nodeid = "58" > 测试</p > <p wx: nodeid="94">一下</p>',
                text: "测试一下"
              },
              date:'10/26',
              bgColor:'rgba(9, 185, 255,0.08)',
              isCheck: false
            },
          ]
        },
        group:{
          data:[
            {
              title:'旅游',
              createDate:'',
              bgColor:'#ffb64a',
              isCheck:false,
              childData:{
                topData:[
                  {
                    content: {
                      delta: {
                        ops: [
                          { insert: "测试\r一下\r" }
                        ]
                      },
                      html: ' < p wx: nodeid = "58" > 测试</p > <p wx: nodeid="94">一下</p>',
                      text: "测试一下"
                    },
                    date: '10/26',
                    bgColor: '#fff',
                    isCheck: false
                  },
                ],
                normalData:[
                  {
                    content: {
                      delta: {
                        ops: [
                          { insert: "测试\r一下\r" }
                        ]
                      },
                      html: ' < p wx: nodeid = "58" > 测试</p > <p wx: nodeid="94">一下</p>',
                      text: "测试一下"
                    },
                    date: '10/26',
                    bgColor: 'rgba(9, 185, 255,0.08)',
                    isCheck: false
                  },
                ]
              }
            },
            {
              title: '生活',
              createDate: '',
              bgColor: '#8fee71',
              isCheck: false,
              childData: {
                topData: [],
                normalData: []
              }
            }
            ,{
              title: '工作',
              createDate: '',
              bgColor: '#ff0202',
              isCheck: false,
              childData: {
                topData: [],
                normalData: []
              }
            }
            ,{
              title: '学习',
              createDate: '',
              bgColor: '#a69cff',
              isCheck: false,
              childData: {
                topData: [],
                normalData: []
              }
            }
          ]
        }
        ,isNull:true //随笔是否为空
        ,isBtn:true
        ,isLayOpen:false
        ,btnColor:'#ccc'
        ,isOperate:false  //是否为文件操作状态
        ,memoWidth:'100%'  //便签默认宽度
        ,isOperateGroup: false //分组操作状态
      }
    }
    ,methods:{
      goBack(){
        this.$router.go(-1)
      }
      ,toDisplay(){

      }
      ,toMemoItem(){

      }
    }
    ,mounted() {
      if(this.recently.topData.length>0||this.recently.data>0){
        this.isNull=false;
      }
    }
  }
</script>

<style scoped>
  .empty{
    margin-top: 20%;
    text-align: center;
    font-size: 16px;
    color: gray;
  }
  .empty img{
    width: 235px;
  }
  .memoWrapper{
    padding: 0 15px 80px;
    box-sizing: border-box;
  }
  .memoItem{
    width: 100%;
    display: inline-block;
    margin-top: 7.5px;
    box-shadow: 0 2px 8px -5px #555;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 7.5px;
  }
  .memoItem .itemLeft{
    display: inline-block;
    float: left;
    text-align: left;
    width: 80%;
  }
  .memoItem .itemLeft .leftTop{
    width: 100%;
    overflow: hidden;
    max-height: 25px;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .memoItem.isTop{
    padding: 7px 10px;
  }
  .memoItem.isTop .itemRight{
    margin-right: -2.5px;
  }
  .memoItem .itemRight{
    height: 100%;
    float: right;
    margin-right: 5px;
  }
  .memoItem .itemRight .icon{
    display: inline-block;
    float: unset;
    margin-right: unset;
    line-height: unset;
    color: #888;
    font-size: 22.5px;
  }
  .memoItem .itemRight .icon-start1{
    color: rgb(255, 163, 92);
    font-size: 35px;
  }
  .memoItem .itemLeft .leftTop{
    font-size: 16px;
    color: #333;
  }
  .memoItem .itemLeft .leftBottom{
    font-size: 15px;
    color: gray;
  }
  .selectIcon{
    display: inline-block;
    width: 12%;
    height: 100%;
    line-height: 70px;
    vertical-align: top;
    margin-top: 7.5px;
    text-align: right;
  }
  .selectIcon .icon{
    font-size: 22.5px;
    color: gray;
  }
  .selectIcon .icon-xuanzhong3{
    color: #62c9f8;
  }
  .newGroup, .groupWrapper{
    height: 60px;
    width: 100%;
    background-color: #fff;
  }
  .newGroup .itemLeft, .groupWrapper .itemLeft, .recycle .itemLeft{
    width: 15%;
    height: 100%;
    display: inline-block;
  }
  .newGroup .itemLeft .icon{
    line-height: 60px;
    font-size: 33px;
    color: gray;
    text-align: center;
  }
  .groupWrapper .itemLeft .icon{
    line-height: 60px;
    font-size: 33px;
    /* color: #ffd058; */
    text-align: center;
  }
  .recycle .itemLeft .icon{
    line-height: 60px;
    font-size: 32px;
    color: #62c9f8;
  }
  .newGroup .itemRight, .groupWrapper .itemRight{
    width: 83%;
    height: 100%;
    display: inline-block;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    vertical-align: top;
  }
  .itemRight .title{
    text-align: left;
    font-size: 18px;
    line-height: 60px;
    color: #444;
    display: inline-block;
    float: left;
    max-width: 70%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .itemRight .icon{
    display: inline-block;
    float: right;
    margin-right: 25px;
    line-height: 60px;
    color: #444;
  }
  .itemRight .icon-checked1{
    color: #62c9f8;
  }
</style>
<style>
  .van-tabs--line .van-tabs__wrap{
    border-bottom: 1px solid #eee;
  }
</style>
